<template>
  <div>
    <el-form v-if="typeSet.length > 1">
      <el-form-item>
        <el-radio-group v-model="filterParams.type">
          <span v-for="(each,index) in dict.type.haij_device_type" :key="'type'+index" style="padding:5px 10px;">
            <el-radio v-if="typeSet.indexOf(each.value) >= 0" :label="parseInt(each.value)">
              {{ $t('dictionary.'+each.label) }}</el-radio>
          </span>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div v-if="visibleList && visibleList.length > 0" class="card-container">
      <el-card v-for="(item) in visibleList" :key="item.id" :header="`(${item.code})${item.name}`"
        class="controller-card">
        <div slot="header">
          <span>{{ item.name }}</span>
          <span v-if="item.name !== item.code">({{item.code}})</span>
          <!-- <span style="float:right;margin-right:5px;">
            <dict-tag :options="dict.type.haij_device_type" :value="item.type" />
          </span> -->
        </div>
        <div class="controller-body">
          <div :is="controllerByType(item.type)" :value="item" class="controller-content"
            :style="controllerStyle(item)"></div>
        </div>
      </el-card>
    </div>
    <div v-if="!list || list.lenghth === 0">
      <el-alert type="warning" :closable="false">{{ $t('TheAccountHasNoDevice') }}</el-alert>
      <el-button type="primary" @click="$router.push({path:'/haijie/device'})">{{ $t('ToAdd') }}</el-button>
    </div>
  </div>
</template>
<script>
  import deviceAPI from '@/api/device/device'
  import Controllers from "@/views/device/components/controller/index";
  import {
    controllerByType,
    controllerWidthByType,
    controllerHeightByType
  } from './common'
  export default {
    name: "DeviceControllers",
    dicts: ["haij_device_type", "haij_device_mode", "haij_device_state"],
    components: {
      ...Controllers,
    },
    data() {
      return {
        queryParams: {},
        filterParams: {
          type: 0
        },
        list: [],
        total: 0,
        typeSet: []
      }
    },
    computed: {
      visibleList() {
        return this.list.filter(item => item.type === this.filterParams.type)
      }
    },
    created() {
      this.queryPage()
    },
    methods: {
      controllerStyle(item) {
        return {
          width: controllerWidthByType(item.type) + 'px',
          height: controllerHeightByType(item.type) + 'px'
        }
      },
      queryPage(page) {
        const vm = this
        // this.queryParams.pageNo = page ? page : this.queryParams.pageNo
        // deviceAPI.page(this.queryParams).then(res => {
        //   vm.setTypeSet(res.rows)
        //   vm.list = [].concat(res.rows)
        //   vm.total = res.total
        // })
        deviceAPI.list(this.queryParams).then(res => {
          vm.setTypeSet(res.data)
          vm.list = [].concat(res.data)
        })
      },
      setTypeSet(list) {
        this.typeSet = []
        for (var i = 0; i < list.length; i++) {
          const {
            type
          } = list[i]
          if (type >= 0 && this.typeSet.indexOf(type + '') < 0) {
            this.typeSet.push(type + '')
          }
        }
        if (this.typeSet.length > 0) {
          this.filterParams.type = parseInt(this.typeSet[0])
        }
        // const typeList = this.dict.type.haij_device_type
        // const typeSet = []
        // for (var j = 0; j < typeList.length; j++) {
        //   const each = typeList[i]
        //   if (set.indexOf(each.value) >= 0) {
        //     typeSet.push(each)
        //   }
        // }
        // return typeSet
      },
      controllerByType,
      controllerWidthByType,
      controllerHeightByType,
    }
  }

</script>
<style scoped>
  .card-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .controller-card {
    margin: 15px;
  }

  .controller-body {
    /* width: 365px; */
    /* height: 660px; */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
  }

  .controller-content {
    /* box-shadow: 1px 1px 5px 1px #cccccc; */
    padding: 15px;
  }

</style>
